<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <!-- TopJUI框架样式 -->
    <link type="text/css" href="/topjui/css/topjui.core.min.css" rel="stylesheet">
    <link type="text/css" href="/topjui/themes/default/topjui.bluelight.css" rel="stylesheet" id="dynamicTheme"/>
    <!-- FontAwesome字体图标 -->
    <link type="text/css" href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- layui框架样式 -->
    <link type="text/css" href="/static/plugins/layui/css/layui.css" rel="stylesheet"/>
    <link type="text/css" href="/topjui/css/myui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/plugins/kindeditor/themes/default/default.css"/>
    <script type="text/javascript" src="/static/public/js/topjui.config.js"></script>
    <!-- layui框架js -->
    <script type="text/javascript" src="/static/plugins/layui/layui.js" charset="utf-8"></script>
    <script src="/easyui/jquery.min.js"></script>
    <script src="/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
    <script src="/topjui/js/topjui.core.js"></script>
    <script type="text/javascript" src="/topjui/js/sysutils.js"></script>
    <style>
        fieldset{width:760px;margin: 10px;border:1px solid #ccc;}
        legend{margin:0 15px;padding: 0 4px }
        .yb_conct{position:fixed;z-index:8010;top:18px;left:1014px;cursor:pointer;transition:all .3s ease;}
        .yb_bar ul li{width:50px;height:50px;font:16px/53px 'Microsoft YaHei';color:#fff;text-indent:54px;margin-bottom:1px;border-radius:3px;transition:all .5s ease;overflow:hidden;}
        .yb_bar .yb_top{background:#00b4ff url(/img/save.png) no-repeat 0 0;background-size:24px 24px;background-position:13px 13px;}
        .yb_bar .yb_clear{background:#00b4ff url(/img/clearup.png) no-repeat 0 0;background-size:24px 24px;background-position:13px 13px;}
        .yb_QQ a{display:block;text-indent:54px;width:100%;height:100%;color:#fff;}
    </style>
</head>
<body>

<form id="customerform" method="post" style="padding-top:1px">
    <input type="hidden" id="id" name="id" value="0">

    <fieldset>
    <legend>竞价项目 </legend>
    <table class="editTable">
        <tr>
            <td class="label">项目编号</td>
            <td>
                <input type="text" name="sn" id="code"  class="inputp" autocomplete="off" data-options="required:true" style="width: 211px;">
            </td>
            <td class="label">项目名称</td>
            <td>
                <input type="text" name="name"  class="inputp" autocomplete="off" data-options="required:true" style="width: 211px;">
            </td>
            <td class="label">竞标时间</td>
            <td>
                <input type="text" name="time" class="inputp" autocomplete="off" data-options="required:true" style="width: 211px;">
            </td>
            <td class="label">发货时间</td>
            <td>
                <input type="text" name="sendDate" class="inputp" autocomplete="off" data-options="required:true" style="width: 211px;">
            </td>
        </tr>
        <tr>
            <td class="label">发货地点</td>
            <td>
                <input type="text" name="address" class="inputp" autocomplete="off" data-options="required:true" style="width: 211px;">
            </td>
            <td class="label">付款方式</td>
            <td>
                <input type="text" name="payType" class="inputp" autocomplete="off" data-options="required:true" style="width: 211px;">
            </td>
            <td class="label">付款时间</td>
            <td>
                <input type="text" name="payDate" class="inputp" autocomplete="off" data-options="required:true" style="width: 211px;">
            </td>
            <td></td>
            <td></td>
        </tr>
    </table>
    </fieldset>
    <fieldset>
        <legend>项目产品</legend>
        <table style="margin-top:6px; border-top:1px solid #ccc; width: 100%">
            <tr height="200">
                <td height="200">
                    <table id="productitems" class="topjui-datagrid" style="height: 200px;width:1274px"></table>
                </td>
            </tr>
        </table>
    </fieldset>
</form>
<script type="text/javascript" charset="utf-8" th:inline="none">
    var productitems;
    var editRow = undefined; //定义全局变量：当前编辑的行

    $(function(){
        productitems = $('#productitems').datagrid({
            url:"/compete/product/list",
            method:'get',
            fit : false,
            fitColumns : true,
            border : false,
            idField : 'id',
            sortName : 'id',
            sortOrder : 'desc',
            checkOnSelect : true,
            selectOnCheck : true,
            nowrap : false,
            queryParams:{
                "code":""
            },
            columns:[[
                {
                    field:'id',
                    title:'编号',
                    width:50,
                    checkbox : true
                }, {
                    field:'proId',
                    title:'项目编号',
                    width:80,
                    editor : {
                        type : 'validatebox',
                        options : {
                            required : true
                        }
                    }
                }, {
                    field:'productName',
                    title:'产品名称',
                    width:180,
                    editor : {
                        type : 'validatebox',
                        options : {
                            required : true
                        }
                    }
                }, {
                    field:'productInfo',
                    title:'所属大类',
                    width:80,
                    editor : {
                        type : 'validatebox',
                        options : {
                            required : false
                        }
                    }
                }, {
                    field:'productPin',
                    title:'产品品牌',
                    width:150,
                    editor : {
                        type : 'validatebox',
                        options : {
                            required : false
                        }
                    }
                }, {
                    field:'productType',
                    title:'产品类型',
                    width:150,
                    editor : {
                        type : 'validatebox',
                        options : {
                            required : false
                        }
                    }
                }, {
                    field:'productValue',
                    title:'产品单价',
                    sortable:true,
                    width:60,
                    editor : {
                        type : 'validatebox',
                        options : {
                            required : false
                        }
                    }
                } ,{
                    field:'productSum',
                    title:'需求数量',
                    width:60,
                    editor : {
                        type : 'validatebox',
                        options : {
                            required : true
                        }
                    }
                }, {
                    field:'productUint',
                    title:'数量单位',
                    width:60,
                    editor : {
                        type : 'validatebox',
                        options : {
                            required : false
                        }
                    }
                },{
                    field:'desption',
                    title:'描述',
                    width:160,
                    editor : {
                        type : 'validatebox',
                        options : {
                            required : false
                        }
                    }
                }
            ]],
            toolbar : [{
                text : '添加',
                iconCls : 'fa fa-plus',
                handler : function() {//添加列表的操作按钮添加，修改，删除等
                    var code = $('#code').val();
                    console.log(code);
                    if(code==undefined|| code==''){
                        $.messager.show({
                            title: '提示信息',
                            msg: '编号不能为空'
                        });
                        return
                    }
                    //添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
                    if (editRow != undefined) {
                        productitems.datagrid("endEdit",editRow);
                    }
                    //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
                    if (editRow == undefined) {
                        productitems.datagrid("insertRow",{
                            index : 0, // index start with 0
                            row : {}
                        });
                        //将新插入的那一行开户编辑状态
                        productitems.datagrid("beginEdit",0);
                        //给当前编辑的行赋值
                        editRow = 0;
                    }
                }
            },'-',
                {
                    text : '删除',
                    iconCls : 'fa fa-trash',
                    handler : function() {
                        //删除时先获取选择行
                        var rows = productitems.datagrid("getSelections");
                        //选择要删除的行
                        if (rows.length > 0) {
                            $.messager.confirm("提示","你确定要删除吗?",
                                function(r) {
                                    if (r) {
                                        var ids = [];
                                        for (var i = 0; i < rows.length; i++) {
                                            ids.push(rows[i].id);
                                        }
                                        //将选择到的行存入数组并用,分隔转换成字符串，
                                        //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
                                        //alert(ids.join(','));
                                        $.ajax({
                                            url:"/compete/product/remove",
                                            data:{"ids":ids.join(',')},
                                            method:'post',
                                            dataType:'json',
                                            success:function (data) {
                                                if(data.statusCode=='200') {
                                                    var queryParams = productitems.datagrid('options').queryParams;
                                                    queryParams.code = $('#c_code').val();
                                                    productitems.datagrid("options").queryParams=queryParams;
                                                    productitems.datagrid("reload");

                                                    $.messager.show({
                                                        title: '提示信息',
                                                        msg: data.message
                                                    });
                                                }
                                            },
                                            error:function () {
                                                var queryParams = productitems.datagrid('options').queryParams;
                                                queryParams.code = $('#code').val();
                                                productitems.datagrid("options").queryParams=queryParams;
                                                productitems.datagrid("reload");

                                                $.messager.show({
                                                    title: '提示信息',
                                                    msg: "操作失败"
                                                });
                                            }
                                        });
                                    }
                                });
                        } else {
                            $.messager.alert("提示",
                                "请选择要删除的行", "error");
                        }
                    }
                },
                '-',
                {
                    text : '保存',
                    iconCls : 'fa fa-save',
                    handler : function() {
                        //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
                        productitems.datagrid("endEdit", editRow);
                    }
                }, '-', {
                    text : '刷新',
                    iconCls : 'fa fa-refresh',
                    handler : function() {
                        //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
                        editRow = undefined;
                        productitems.datagrid("rejectChanges");
                        productitems.datagrid("unselectAll");
                        var queryParams = productitems.datagrid('options').queryParams;
                        queryParams.code = $('#code').val();
                        productitems.datagrid("options").queryParams=queryParams;
                        productitems.datagrid("reload");
                    }
                }],
            onBeforeLoad:function(param){
                console.log($('#code').val());
                param.code = $('#code').val();
            },
            onAfterEdit : function(rowIndex, rowData, changes) {
                //endEdit该方法触发此事件
                console.info(rowData);
                var url =  "";
                var msg =  "";
                if(rowData.id==undefined||rowData.id==0){
                    url = "/compete/product/add";
                    msg =  '新建成功！';
                }else{
                    url = "/compete/product/edit";
                    msg = '修改成功！';
                }

                $.ajax({
                    url:url,
                    data:rowData,
                    method:'post',
                    dataType:'json',
                    success:function (data) {
                        if(data.statusCode=='200') {
                            var queryParams = productitems.datagrid('options').queryParams;
                            queryParams.code = $('#code').val();
                            productitems.datagrid("options").queryParams=queryParams;
                            productitems.datagrid("reload");

                            $.messager.show({
                                title: '提示信息',
                                msg: data.message
                            });
                        }
                    },
                    error:function () {
                        var queryParams = productitems.datagrid('options').queryParams;
                        queryParams.code = $('#code').val();
                        productitems.datagrid("options").queryParams=queryParams;
                        productitems.datagrid("reload");

                        $.messager.show({
                            title: '提示信息',
                            msg: msg
                        });
                    }
                });

                editRow = undefined;

            },
            onDblClickRow : function(index, row) {
                //双击开启编辑行
                var code = $('#code').val();
                if(code==undefined|| code==''){
                    $.messager.show({
                        title: '提示信息',
                        msg: '编号不能为空'
                    });
                    return
                }
                if (editRow != undefined) {
                    productitems.datagrid("endEdit", editRow);
                }
                if (editRow == undefined) {
                    productitems.datagrid("beginEdit", index);
                    editRow = index;
                }
            },
            onBeforeEdit:function(index,row) {
                row.proId = $('#code').val();
            },
            onEndEdit:function (index, row) {
                row.proId = $('#code').val();
            }
        });
    });

</script>
</body>
</html>